<template>
  <view class="container">
    <scroll-view class="scroll-view" @refresherrefresh="onScrolltoUpper" @scrolltolower="onScrolltoLower"
      :throttle="false" :refresher-triggered="isTrigger" scroll-y refresher-enabled>
      <view class="order-list">
        <view class="order-item" v-for="(item, index) in orderList" :key="index">
          <view class="order-header">
            <text class="product-name">商品名称：{{ item.planTitle }}</text>
            <text class="order-status">{{ ORDER_STATUS_TEXT[item.status] }}</text>
          </view>

          <view class="order-details">
            <view class="detail-row">
              <text class="detail-label">订单编号：</text>
              <text class="detail-value">{{ item.orderNo }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">创建时间：</text>
              <text class="detail-value">{{ item.createdAt }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">租用时间：</text>
              <text class="detail-value">{{ item.createdAt }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">订单金额：</text>
              <text class="detail-value">¥{{ item.planMarketPrice }}</text>
            </view>
          </view>
          <!-- 添加虚线分隔线 -->
          <view class="dashed-divider"></view>
          <view class="action-buttons-container">
            <view class="action-buttons">
              <button class="action-btn detail-btn" @click="handleDetail(item)">订单详情</button>
              <button class="action-btn consult-btn" @click="handleConsult(item)">咨询</button>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getMealOrderList } from '@/api/meal.js'
import { ORDER_STATUS_TEXT } from '@/const/order.js'

export default {
  data() {
    return {
      orderList: [],
      isTrigger: false,
      page: 1,
      ORDER_STATUS_TEXT,
    }
  },
  async onLoad() {
    this.getOrderList()
  },
  methods: {
    async getOrderList() {
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      const page = this.page
      try {
        const res = await getMealOrderList(page)
        this.orderList = page === 1 ? res.data : [...this.orderList, ...res.data]
        if (!res.data.length) {
          uni.showToast({
            title: '没有更多数据了',
            icon: 'none'
          })
        }
        uni.hideLoading()
      } catch (error) {
        uni.hideLoading()
      }
    },
    handleDetail(item) {
      // 处理订单详情点击
      console.log('查看订单详情', item);
      uni.navigateTo({
        url: `/pages/order/detail/index?no=${item.orderNo}`,
      })
    },
    handleConsult(item) {
      // 处理咨询点击
      console.log('咨询订单', item);
      uni.makePhoneCall({
        phoneNumber: '010-52335555'
      });
    },
    onScrolltoLower() {
      console.log('滚动触底了')
      this.page++
      this.getOrderList()
    },
    onScrolltoUpper() {
      this.page = 1
      this.isTrigger = true
      this.getOrderList()
      this.isTrigger = false
    }
  }
}
</script>

<style>
.container {
  padding: 0;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding: 20rpx;
}

.order-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx;
  box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx dashed #eaeaea;
}

.product-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #2c8dfb;
}

.order-status {
  font-size: 26rpx;
  color: #999;
}

.order-details {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  margin: 16rpx 0;
}

.detail-row {
  display: flex;
  font-size: 26rpx;
  line-height: 1.5;
}

.detail-label {
  color: #999;
  width: 160rpx;
}

.detail-value {
  color: #333;
  flex: 1;
}

/* 新增虚线分隔线样式 */
.dashed-divider {
  height: 1rpx;
  background-color: transparent;
  border-top: 1rpx dashed #eaeaea;
  margin: 20rpx 0;
}

/* 修改按钮容器样式，使其靠右对齐 */
.action-buttons-container {
  display: flex;
  justify-content: flex-end;
}

.action-buttons {
  display: flex;
  gap: 12rpx;
  /* 减少按钮间距 */
  margin-top: 16rpx;
  /* 减少上边距 */
}

.action-btn {
  font-size: 22rpx;
  /* 减小字体大小 */
  border-radius: 28rpx;
  /* 调整圆角大小 */
  border: 1rpx solid #2c8dfb;
  background-color: #ffffff;
  color: #2c8dfb;
  transition: all 0.2s ease;
}

.action-btn:active {
  background-color: #e8f4fe;
  opacity: 0.8;
}

/* 禁用状态样式 */
.action-btn[disabled] {
  background-color: #f5f5f5;
  color: #ccc;
  border-color: #eee;
}

.detail-btn {
  /* 可以添加特定样式 */
}

.consult-btn {
  /* 可以添加特定样式 */
}

.scroll-view {
  flex: 1;
  width: 100%;
  height: 1300rpx;
}
</style>